<template>
    <div>
      <Header :position="position"></Header>
      <div style="display: flex;width: 100%;height: 875px">
          <div style="width: 40%;margin-right: 10px;height: 100%;display: flex;flex-flow: column">
              <el-card style="width: 100%;overflow: auto;height: 65%;margin-bottom: 10px">
                  <div slot="header"
                       style="font-size: 20px;font-weight: bolder;text-align: left">
                      <span>诊断参数设置</span>
                  </div>
                  <div style="display: flex">

                      <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect1"  placeholder="车种">
                          <el-option v-for="item in typeSelectData1" :key="item"
                                     :label="item.name" :value="item.value"></el-option>
                      </el-select>

                      <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect2"  placeholder="车型">
                          <el-option v-for="item in typeSelectData2" :key="item"
                                     :label="item.name" :value="item.value"></el-option>
                      </el-select>
                      <el-select v-model="typeSelect3"  placeholder="车号" style="width: 33%">
                          <el-option v-for="item in typeSelectData3" :key="item"
                                     :label="item.name" :value="item.value"></el-option>
                      </el-select>

                  </div>
                  <div style="height: 20px"></div>
                  <div style="display: flex;align-items: center">
                      <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect4"  placeholder="诊断位置">
                          <el-option v-for="item in typeSelectData4" :key="item"
                                     :label="item.name" :value="item.value"></el-option>
                      </el-select>

                      <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect5"  placeholder="诊断参数">
                          <el-option v-for="item in typeSelectData5" :key="item"
                                     :label="item.name" :value="item.value"></el-option>
                      </el-select>
                      <div style="width: 33%">

                      </div>
                  </div>
                  <el-divider></el-divider>
                  <div style="width: 100%">
                      <el-image :src="require('../../assets/img/2.png')"
                              style="height: 200px;width:100%" :fit="'fill'"></el-image>
                  </div>
                  <div style="margin-top: 10%;text-align: center">
                      <el-button type="primary" size="medium" @click="searchData">开始诊断</el-button>
                  </div>
              </el-card>
              <el-card style="width: 100%;height: 35%;overflow: auto;">
                  <div slot="header"
                       style="font-size: 20px;font-weight: bolder;text-align: left">
                      <span>故障次数统计</span>
                  </div>
                  <div style="height: 100%">
                      <div id="annual" style="height: 180px;width: 100%"></div>
                  </div>
              </el-card>
          </div>
          <div style="width:60%;height: 100%">
              <el-card style="width: 100%;height: 100%;text-align: left">
                  <div slot="header"
                       style="font-size: 20px;font-weight: bolder;text-align: left">
                      <span>诊断结果预览</span>
                  </div>
                  <div style="display: flex;flex-flow: column;width: 100%">
                     <div style="display: flex;width: 100%">
                         <el-card style="width: 30%;margin-right: 10px" shadow="never">
                             <div style="height: 100%;margin-top: 20px">
                             <div style="font-weight: bold;display: flex;width: 100%;
                             justify-content:center; align-items:center;;flex-flow: column;height: 100%">
                                 <div style="font-size: 70px;color: red">A</div>
                                 <div>危险系数</div></div>
                             </div>
                         </el-card>
                         <el-card style="width: 70%" shadow="never">
                             <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;
                             font-weight: bolder;text-align: right;
                            display: inline-block;width: 30%">诊断结果</span>
                                <span style="text-align: center;display: inline-block;width: 70%">{{result}}</span> </div>
                             <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;font-weight: bolder;text-align: right;
                        display: inline-block;width: 30%">用时</span>
                                 <span style="text-align: center;display: inline-block;width: 70%">{{time}}</span>
                             </div>
                             <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;font-weight: bolder;text-align: right;
                        display: inline-block;width: 30%">算法模板</span>
                                 <span style="text-align: center;display: inline-block;width: 70%">{{AlgorithmTemplate}}</span>
                             </div>
                         </el-card>
                     </div>
                      <div style="display: flex;width: 100%;margin-top: 10px;height: 500px">
                          <el-card style="width: 50%;margin-right: 10px;overflow-y: auto" shadow="never">
                              <div><span style="font-size: 18px;font-weight: bolder;display: inline-block;">
                                  <span style="font-size: 25px">详细信息</span>
<!--                                  ;display: flex; align-items: center;-->
                                <div style="height: 300px;overflow-y:auto; text-align: left;
                                            margin-left: 50px;margin-right: 50px;margin-top: 10px;
                                            letter-spacing:1px;">{{detail}}</div></span></div>
<!--                              <el-divider></el-divider>-->
<!--                              <div style="text-align: center;margin-top: 10%">-->
<!--                                  <el-button type="primary" size="medium">下载</el-button>-->
<!--                              </div>-->
                          </el-card>
                          <el-card style="width: 50%;overflow-y: auto" shadow="never">
                              <div><span style="font-size: 18px;font-weight: bolder;display: inline-block;">
                                  <span style="font-size: 25px">建议方案</span>
<!--                                  display: flex; align-items: center;-->
                                <div style="height: 300px;overflow-y:auto;margin-top: 10px;
                                            margin-left: 50px;margin-right: 50px;
                                            text-align: left">{{detail}}</div></span></div>
<!--                              <el-divider></el-divider>-->
<!--                              <div style="text-align: center;margin-top: 10%">-->
<!--                                  <el-button type="primary" size="medium">下载</el-button>-->
<!--                              </div>-->
                          </el-card>
                      </div>
                      <div style="margin-top: 5%;text-align: center">
                          <el-button type="primary" size="medium" @click="downLoad">下载</el-button>
                      </div>

                  </div>
              </el-card>
          </div>
      </div>
    </div>
</template>

<script>
    import Header from "../Header";
    import * as echarts from "echarts";
    export default {
        name: "DiagnosisCard",
        components:{Header},
      data(){
          return{
            typeSelect1:'',
            typeSelect2:'',
            typeSelect3:'',
            typeSelect4:'',
            typeSelect5:'',
            typeSelectData2:[{name:'BC-769',value:'1'},{name:'GT-525',value:'2'},{name:'BD-656',value:'3'}],
            typeSelectData1:[{name:'跑车',value:'1'}],
            typeSelectData4:[{name:'风轮叶片',value:'1'},{name:'发电机',value:'2'},{name:'转轮',value:'2'}],
            typeSelectData3:[{name:'京A1234',value:'1'},{name:'京A1ds4',value:'2'}],
            typeSelectData5:[{name:'震动',value:'1'},{name:'温度',value:'2'},{name:'噪声',value:'3'},{name:'真空率',value:'4'},{name:'功率',value:'5'}],
            detail:'冷却系严重漏水；隔绝水套与气缸的气缸垫\n' +
              '被冲坏；节温器主阀门脱落；风扇传动带松\n' +
              '脱或断裂；水泵轴与叶轮松脱；风扇离合器\n',
            result:'危险系数高',
            time:'30秒',
            position:{
              secondTitle:'故障信息' ,
              thirdTitle:'综合诊断'
          },
            AlgorithmTemplate:'决策树',
              annualData:{
                xData:['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
                  value1:[120, 132, 101, 134, 90, 230, 210],
              }
          }
      },
        mounted() {
            this.drawAnnualPie()
        },
        methods:{
            drawAnnualPie(){
                let option= {
                    legend: {
                        data: ['故障次数']
                    },
                    xAxis: {
                        type: 'category',
                        data: this.annualData.xData,
                        name: "时", //坐标名字
                        nameLocation: "end",//坐标位置，支持start,end，middle
                        nameTextStyle: {//字体样
                            padding: -10 //距离坐标位置的距离
                        }
                    },
                    grid: {
                        x: 30,
                        y:30,
                        x2: 30,
                        y2:30
                    },
                    yAxis: {
                        type: 'value',
                        name: "指标数", //坐标名字
                        nameLocation: "end",//坐标位置，支持start,end，middle
                        nameTextStyle: {//字体样式


                            padding: -10 //距离坐标位置的距离

                        }
                    },
                    series: [{
                        name: '诊断报告数',
                        type: 'line',
                        stack: '总量',
                        data: this.annualData.value1
                    },]
                };
                let myChart = echarts.init(document.getElementById('annual'));
                myChart.setOption(option);
            },
        }
    }
</script>

<style scoped>

</style>
